<template>
	<view class="page">
		<image
			src="https://renovationcdn.jiachuangnet.com/index/workerIndex/companyBg.png"
			class='bg' style=""></image>
		<view class="title">
			<view >
				
			</view>
			<view >
				xxx装修公司
			</view>
			<view style="margin-right: 20rpx;">
				消息
			</view>
		</view>
		<view class="search_box" >
			<view :class="[loginType==0 ?'rangeBtn1':'rangeBtn']" @click="showRange=true">
				<u-icon name="map-fill" color="#e7f4f5" size="18" ></u-icon>
				<view >{{province||'全国'}}</view>
			</view>
			<!-- <view class="rangeBtn1" @click="showCompanyName=true" v-if="loginType==0">
				<u-icon name="home-fill" color="#e7f4f5" size="18" ></u-icon>
				<view >{{companyName||'全部'}}</view>
			</view> -->
			<view class="search">
				<u--input v-model="searchKey" @change="deChange" color="#e7f4f5" placeholder="请输入搜索关键字" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #e7f4f5;" ></u--input>
			</view>
			<view class="add"  v-if="loginType==0||loginType==1" @click="addClick">
				添加订单
			</view>
			
		</view>
		<view :class="['container',list.length===0?'container_h':'']" style="">
			<view style="width: 100%;height: 50vh;" v-if="list.length===0">
				<u-empty
				        mode="data"
				        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
						width="100%"
						height="100%"
				>
				</u-empty>
			</view>
			
			<view class="tab-wrapper">
				<u-tabs :list="taskStateList" :current="currentTask" @click="changeTaskState" :activeStyle="{ color: '#333333' } " :inactiveStyle="{ color: '#cecece' } " lineColor="#333333"></u-tabs>
			</view>
			<view class="storeList">
				
				 <u-list @scrolltolower="scrolltolower">
				      <u-list-item v-for="(v,i) in list" :key='i'>
						<view  class="item" >
							<view class="flex case_wrappper" style="justify-content: start">
								<view class="case_item">
									<image src="https://renovationcdn.jiachuangnet.com/A1.jpg" mode="" class="case_img"></image>
								</view>
								<view class="taskMsg">
									<view class="taskTital">
										{{v.assignName}}
									</view>
									<view class="timer" v-if="v.createTime">
										开始日期： {{ v.createTime.split(' ')[0]}}
									</view>
									<view class="contract">
										待开工
									</view>
									<view class="flagship" v-if="v.status==0">
										待开始
									</view>
									<view class="flagship" v-if="v.status==1">
										进行中
									</view>
									<view class="btn" v-if="v.status==0" @click="assignStartWork(v.assignTaskId)">
										开工
									</view>
									<view class="btn" v-if="v.status==1" @click="taskProgress(v.assignTaskId)">
										进行中
									</view>
								</view>
							</view>
						</view>
				      </u-list-item>
				</u-list>
				
				
			</view>
			
			
			
		</view>
		<!-- 对任务条件搜索 -->
		<u-picker :show="showCompanyName" :columns="columns1" @cancel="showCompanyName=false" @confirm="searchHandler1"></u-picker>
		<!-- 对任务条件搜索 -->
		<u-picker :show="showRange" :columns="columns" @cancel="showRange=false" @confirm="searchHandler"></u-picker>
	</view>
</template>


<script>
	let app = getApp();
	// import { numberToChanie } from '../../util.js'
	import {numberToChanie}  from '../../../util.js'
	export default {
		data() {
			return {
				currentTask:0,
				taskStateList:[
					{
						name:'全部',
						badge: {
						    value: 5,
						}
					},{
						name:'待开始'
					},{
						name:'进行中'
					},{
						name:'待验收'
					},{
						name:'已逾期'
					}
				],
				color: app.globalData.defaultColor,
				pageNumber: 1,
				pageSize: 5,
				total:1,
				list: [],
				status:'',
				loginType:null,////
				isLogin:'',
				showRange:false,
				province:null,///
				showCompanyName:false,
				companyName:null,
				companyId:null,
				columns1:[],
				companyList:null,
				columns:[
					[
					    "全国","北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", 
					    "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", 
					    "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", 
					    "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", 
					    "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", 
					    "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", 
					    "澳门特别行政区", "台湾省"
					]
				],
				searchKey:''
			}
		},
		
		////
		onShareAppMessage(res) {
			return {
				title: '速工装装修',
				path: '/pages/index/index',
			}
		},
		onPullDownRefresh() {
			this.pageNumber=1
			this.list=[]
			this.getTaskList()
		},
		onLoad() {
			uni.setStorageSync('isLogin', 'yes')
		},
		onShow() {
			this.getUserInfo();
			this.pageNumber=1
			this.list=[]
			this.getTaskList()
			this.loginType= uni.getStorageSync('loginType')
			this.isLogin= uni.getStorageSync('isLogin')==='yes'?true:false
			if(this.loginType==0){
				console.log(this.loginType,'0000000')
				this.getCompanyListMini()
			}
		},
		filters:{
			numberToChanieFilter(num){
				return numberToChanie(num)
			}
		},
		methods: {
			assignStartWork(assignTaskId){
				uni.$u.http.post('/assign/startWork', {
					assignTaskId
				}).then( res => {
					if(res){
						uni.$u.toast('已开工 :)');
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/taskAllocation/index?assignTaskId=${assignTaskId}`
							})
						},500)
					}
				})
			},
			taskProgress(assignTaskId){
				uni.navigateTo({
					url:`/pages/taskProgress/index?assignTaskId=${assignTaskId}`
				})
			},
			scrolltolower(){
				if(this.list.length>=this.total){
					this.status='noMore'
					return
				}
				this.pageNumber++
				this.getTaskList()
			},
			deChange(){
				uni.$u.debounce(this.change, 1000)
				
			},
			changeTaskState(e){
				console.log(e)
				// this.currentTask=index
			},
			change(){
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			searchHandler1(e){
				console.log(e)
				if(e.value[0]=='全部'){
					this.companyName=null
					this.companyId=null
				}else{
					this.companyName=e.value[0]
					this.companyId=this.companyList[e.indexs[0]-1].companyId
				}
				this.showCompanyName=false
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			searchHandler(e){
				if(e.value[0]=='全国'){
					this.province=null
				}else{
					this.province=e.value[0]
				}
				this.showRange=false
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			addClick(){
				if(!this.isLogin) return uni.$u.toast('请先登录:)')
				if(this.loginType==0||this.loginType==1){
					uni.navigateTo({
						url:'/packageB/pages/createTask1/index'
					})
				}else{
					uni.$u.toast('无管理员权限:)')
				}
				
			},
			getTaskList() {
				this.status='loading'
				const params = {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					province:this.province,
					assignName:this.searchKey,
					companyId:this.companyId||null
				}
				uni.$u.http.post('/assign/getAssignTaskList', params).then(async res => {
					console.log(res,'获取任务列表')
					if(res){
						this.list=[...this.list,...res.data]
						this.total=res.total
						if(this.list.length>=this.total){
							this.status='noMore'
						}else{
							this.status='more'
						}
					}
					uni.stopPullDownRefresh()
				})
			},
			toDetails(msg) {
				// uni.navigateTo({
				// 	url: `/pages/details/index?status=${msg.status}&assignTaskId=${msg.assignTaskId}&assignName=${msg.assignName}&createTime=${msg.createTime}&address=${msg.address}&customerScore=${msg.customerScore}&projectUserName=${msg.projectUserName}&userName=${msg.userName}&customerPhone=${msg.customerPhone}&userPhone=${msg.userPhone}&chargePhone=${msg.chargePhone}&projectPhone=${msg.projectPhone}&afterPhone=${msg.afterPhone}`
				// })
				uni.navigateTo({
					url:`/pages/details/index?assignTaskId=${msg.assignTaskId}`
				})
			},
			toPath() {
				uni.navigateTo({
					url: '/pages/noticeDetail/index',
				})
			},
			getCompanyListMini(){
				uni.$u.http.get('/company/getCompanyListMini',{
					params:{
						pageNumber:1,
						pageSize:999999,
					}
				}).then((res)=>{
					if(res.data){
						console.log(res.data)
						this.companyList=res.data
						const comanyListArr=res.data.map(item=>item.companyName)
						this.columns1=[['全部',...comanyListArr]]
						console.log(comanyListArr,this.columns1[0])
					}
					
				})
			},
			getUserInfo() {
				uni.$u.http.get('/user/userInfo').then(async res => { 
					if (res) {
						console.log(res)
						this.isLogin = true;
						 
						uni.setStorageSync('avatar', res.avatar)
						uni.setStorageSync('nickName', res.nickName)
						uni.setStorageSync('roleId', res.roleId)
						uni.setStorageSync('userId', res.userId)
						uni.setStorageSync('loginType',res.loginType)
						this.loginType= res.loginType
					} else {
						this.isLogin = false
						 
					}
				})
			},


		}
	}
</script>
<style>
	page {
		background: #fff;
		font-size: 12px;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	
	.title{
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 90rpx;
		left: 0;
		right: 0;
		z-index: 2;
		color: #ffffff;
		font-size: 28rpx
	}
	.search_box{
		display: flex;
		position: absolute;
		top: 125rpx;
		left: 0;
		right: 0;
		z-index: 2;
		.rangeBtn{
			width: 150rpx;
			color: #e7f4f5;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 10rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.rangeBtn1{
			width: 150rpx;
			color: #e7f4f5;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 10rpx 0 25rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			
		}
		.search{
			width: 400rpx;
			border-radius: 40rpx;
			
		}
		.add{
			 width: 178rpx;
			line-height: 66rpx;
			  border-radius: 20rpx;
			  border: 2rpx solid rgba(242, 242, 242, 0);
			  background-color: #13989a;
			  color: #ffffff;
			  text-align: center;
			  box-sizing: border-box;
			  margin-right: 14rpx;
		}
	}
	
	
	.val_1{
		width: auto;
		text-align: unset;
	}
	.label_1{
		width: auto;
		margin-right: 5rpx;
	}
	.day{
		text-align: center;
		line-height:89rpx;
		font-weight: 700;
		font-size: 16rpx;
		color: #fff;
		transform: rotate(-20deg);
		vertical-align: middle;
		  word-break:keep-all;
		  white-space:nowrap; 
	}
	::v-deep.container {
		width: 700rpx;
		padding: 0;
		position: absolute;
		top: 350rpx;
		left: 25rpx;
		z-index: 10;
		.tab-wrapper{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			transform: translate(0 -50%);
			z-index: 12;
			.u-tabs{
				 border-radius: 10px;
				 border: 1px solid rgba(242, 242, 242, 0.65);
				 background-color: #ffffff;
			}
		}
		.storeList{
			max-height: 1040rpx;
			overflow-y: scroll;
			padding-top: 110rpx;
		}
	}
	::v-deep.container_h{
		padding-bottom: unset;
		.tab-wrapper{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 12;
			transform: translate(0 -50%);
			.u-tabs{
				 border-radius: 10px;
				 border: 1px solid rgba(242, 242, 242, 0.65);
				 background-color: #ffffff;
			}
		}
		.storeList{
			max-height: 1040rpx;
			overflow-y: scroll;
			padding-top: 110rpx;
		}
	}
	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	

	.itemHeader {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background: linear-gradient(to right, #e7f4f5, #fff);
	}

	.flex {}
	.item {
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 32rpx;
		padding: 40rpx;
		padding-top: 90rpx;
		position: relative;
		font-size: 28rpx;
		border-radius: 12px;
		border: 1px solid rgba(242, 242, 242, 0.99);
		.case_wrappper{
			flex-wrap: wrap;
			justify-content: space-between;
			.case_item{
				border-radius: 10rpx;
				overflow: hidden;
				.case_img{
					width: 230rpx; 
					height: 260rpx;
					 border-radius: 10px;
				}
			}
			.taskMsg{
				padding-left: 28rpx;
				.taskTital{
					  color: #333333;
					  margin-bottom: 24rpx;
				}
				.timer{
					color: #333333;
					 margin-bottom: 24rpx;
				}
				.contract{
					color: #13989a;
					 margin-bottom: 24rpx;
				}
			}
			.flagship{
				font-size: 24rpx;
				color: #6c76f4;
				position: absolute;
				top:40rpx;
				right: 40rpx;
			}
			.btn{
				 width: 160rpx;
				  line-height: 64rpx;
				  border-radius: 24rpx;
				  background-color: #13989a;
				  font-weight: 500;
				  color: #fff;
				  text-align: center;
				  margin-left: 200rpx;
			}
		}
	}
	
</style>